<div>
    <h1 mat-dialog-title style="display:inline-block;cursor:move;" mat-dialog-draggable>{{'dlg.userproperty-title' | translate}}</h1>
    <mat-icon (click)="onNoClick()" style="float:right;margin-right:-10px;margin-top:-10px;cursor:pointer;color:gray;">clear</mat-icon>
    <div mat-dialog-content *ngIf="!data.current">
		{{'msg.user-remove' | translate}} '{{data.user.username}}' ?
	</div>
    <div mat-dialog-content *ngIf="data.current">
        <div class="my-form-field" style="display: block;margin-bottom: 10px;">
            <span>{{'general.username' | translate}}</span>
            <input [(ngModel)]="data.user.username" type="text" style="width: 125px" [disabled]="isNewUser()">
        </div>
        <div class="my-form-field" style="display: block;margin-bottom: 10px;">
            <span>{{'general.fullname' | translate}}</span>
            <input [(ngModel)]="data.user.fullname" type="text" style="width: 250px">
        </div>
        <div class="my-form-field" style="display: block;margin-bottom: 10px;">
            <span>{{'general.password' | translate}}</span>
            <input autocomplete="off" (keydown)="keyDownStopPropagation($event)" [(ngModel)]="data.user.password" [type]="showPassword ? 'text' : 'password'" placeholder="•••••••" style="width: 250px">
            <mat-icon matSuffix (click)="showPassword = !showPassword" class="show-password">{{showPassword ? 'visibility' : 'visibility_off'}}</mat-icon>
        </div>
        <div class="my-form-field" style="display: block;margin-bottom: 10px;">
            <span>{{'dlg.userproperty-groups' | translate}}</span>
            <sel-options #seloptions [selected]="selectedGroups" [disabled]="isAdmin()" [options]="groups"></sel-options>
        </div>
    </div>
    <div mat-dialog-actions class="dialog-action">
        <button mat-raised-button (click)="onNoClick()">{{'dlg.cancel' | translate}}</button>
        <button mat-raised-button [disabled]="!isValid(data.user.username)" color="primary" (click)="onOkClick()" cdkFocusInitial>{{'dlg.ok' | translate}}</button>
    </div>
</div>